<template>
  <view class="book-service-container">
    <view class="form-header">
      <text class="header-title">预约服务</text>
      <text class="header-subtitle">为您的宠物预约专业服务</text>
    </view>
    
    <view class="form-section">
      <view class="section-title">基本信息</view>
      
      <view class="form-item">
        <text class="form-label">宠物</text>
        <view class="form-input">
          <text>{{ petName }}</text>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">服务类型</text>
        <view class="form-input">
          <picker @change="bindServiceChange" :value="serviceIndex" :range="serviceOptions" range-key="name">
            <view class="picker-value">
              {{ serviceOptions[serviceIndex].name }}
            </view>
          </picker>
          <view class="picker-arrow">
            <u-icon name="arrow-right" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">服务方式</text>
        <view class="service-type-options">
          <view 
            v-for="(item, index) in serviceTypes" 
            :key="index" 
            :class="['type-option', serviceTypeIndex === index ? 'active' : '']"
            @click="selectServiceType(index)"
          >
            {{ item }}
          </view>
        </view>
      </view>
    </view>
    
    <view class="form-section">
      <view class="section-title">预约时间</view>
      
      <view class="form-item">
        <text class="form-label">日期</text>
        <view class="form-input">
          <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="picker-value">
              {{ date }}
            </view>
          </picker>
          <view class="picker-arrow">
            <u-icon name="arrow-right" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">时间段</text>
        <view class="time-slot-options">
          <view 
            v-for="(item, index) in timeSlots" 
            :key="index" 
            :class="['time-slot', timeSlotIndex === index ? 'active' : '', item.available ? '' : 'disabled']"
            @click="selectTimeSlot(index)"
          >
            {{ item.time }}
          </view>
        </view>
      </view>
    </view>
    
    <view class="form-section">
      <view class="section-title">联系方式</view>
      
      <view class="form-item">
        <text class="form-label">联系人</text>
        <view class="form-input">
          <input type="text" v-model="contactName" placeholder="请输入联系人姓名" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号</text>
        <view class="form-input">
          <input type="number" v-model="contactPhone" placeholder="请输入联系电话" maxlength="11" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">备注</text>
        <view class="form-textarea">
          <textarea v-model="remark" placeholder="请输入备注信息（选填）" />
        </view>
      </view>
    </view>
    
    <view class="submit-section">
      <view class="price-info">
        <text class="price-label">费用：</text>
        <text class="price-value">¥{{ serviceOptions[serviceIndex].price }}</text>
      </view>
      <view class="submit-btn" @click="submitBooking">
        <text>提交预约</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import modal from '@/plugins/modal';

// 宠物ID和名称
const petId = ref(0);
const petName = ref('');

// 服务选择
const serviceOptions = ref([
  { id: 1, name: '上门美容', price: 199 },
  { id: 2, name: '到店美容', price: 149 },
  { id: 3, name: '宠物寄养', price: 99 },
  { id: 4, name: '宠物托管', price: 79 },
  { id: 5, name: '宠物体检', price: 299 },
  { id: 6, name: '疫苗接种', price: 199 }
]);
const serviceIndex = ref(0);

// 服务方式
const serviceTypes = ref(['上门服务', '到店服务']);
const serviceTypeIndex = ref(0);

// 日期选择
const date = ref(formatDate(new Date()));
const startDate = formatDate(new Date());
const endDate = formatDate(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)); // 30天后

// 时间段选择
const timeSlots = ref([
  { time: '09:00-10:00', available: true },
  { time: '10:00-11:00', available: true },
  { time: '11:00-12:00', available: false },
  { time: '13:00-14:00', available: true },
  { time: '14:00-15:00', available: true },
  { time: '15:00-16:00', available: true },
  { time: '16:00-17:00', available: true },
  { time: '17:00-18:00', available: false }
]);
const timeSlotIndex = ref(0);

// 联系信息
const contactName = ref('');
const contactPhone = ref('');
const remark = ref('');

// 格式化日期
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 服务选择变化
function bindServiceChange(e) {
  serviceIndex.value = e.detail.value;
}

// 选择服务方式
function selectServiceType(index) {
  serviceTypeIndex.value = index;
}

// 日期变化
function bindDateChange(e) {
  date.value = e.detail.value;
  // 这里可以根据日期重新获取可用时间段
}

// 选择时间段
function selectTimeSlot(index) {
  if (timeSlots.value[index].available) {
    timeSlotIndex.value = index;
  }
}

// 提交预约
function submitBooking() {
  // 表单验证
  if (!contactName.value) {
    return modal.msgError('请输入联系人姓名');
  }
  if (!contactPhone.value) {
    return modal.msgError('请输入联系电话');
  }
  if (!/^1\d{10}$/.test(contactPhone.value)) {
    return modal.msgError('请输入正确的手机号码');
  }
  
  // 显示加载中
  modal.loading('提交中...');
  
  // 模拟提交
  setTimeout(() => {
    modal.closeLoading();
    modal.msgSuccess('预约成功');
    
    // 延迟返回
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
}

onMounted(() => {
  // 获取路由参数
  const eventChannel = getOpenerEventChannel();
  petId.value = parseInt(uni.getQueryString('petId') || '1');
  petName.value = uni.getQueryString('petName') || '未知宠物';
});
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.book-service-container {
  padding-bottom: 120rpx;
  
  .form-header {
    padding: 40rpx 30rpx;
    background-color: #ffffff;
    
    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .header-subtitle {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .form-section {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 30rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background-color: #ff6b00;
        border-radius: 3rpx;
      }
    }
    
    .form-item {
      margin-bottom: 30rpx;
      
      .form-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
        display: block;
      }
      
      .form-input {
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        position: relative;
        
        input {
          flex: 1;
          height: 100%;
          font-size: 28rpx;
        }
        
        .picker-value {
          flex: 1;
          font-size: 28rpx;
        }
        
        .picker-arrow {
          position: absolute;
          right: 20rpx;
          color: #999;
        }
      }
      
      .form-textarea {
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 20rpx;
        
        textarea {
          width: 100%;
          height: 160rpx;
          font-size: 28rpx;
        }
      }
      
      .service-type-options {
        display: flex;
        
        .type-option {
          flex: 1;
          height: 80rpx;
          background-color: #f5f5f5;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          
          &:last-child {
            margin-right: 0;
          }
          
          &.active {
            background-color: #fff0e5;
            color: #ff6b00;
            border: 1px solid #ff6b00;
          }
        }
      }
      
      .time-slot-options {
        display: flex;
        flex-wrap: wrap;
        
        .time-slot {
          width: calc(33.33% - 14rpx);
          height: 80rpx;
          background-color: #f5f5f5;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          border-radius: 8rpx;
          
          &:nth-child(3n) {
            margin-right: 0;
          }
          
          &.active {
            background-color: #fff0e5;
            color: #ff6b00;
            border: 1px solid #ff6b00;
          }
          
          &.disabled {
            background-color: #eee;
            color: #ccc;
            pointer-events: none;
          }
        }
      }
    }
  }
  
  .submit-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
    
    .price-info {
      flex: 1;
      display: flex;
      align-items: baseline;
      
      .price-label {
        font-size: 28rpx;
        color: #333;
      }
      
      .price-value {
        font-size: 36rpx;
        color: #ff6b00;
        font-weight: bold;
      }
    }
    
    .submit-btn {
      width: 240rpx;
      height: 80rpx;
      background-color: #ff6b00;
      color: #ffffff;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
    }
  }
}
</style>